<template>
  <div class="layout">
    <div class="sidebar drag">
      <Avatar :width="36"></Avatar>

      <div class="menu-list">
        <template v-for="item in menus" :key="item.id">
          <div
            :class="[
              'menu-item no-drag iconfont',
              item.icon,
              activeMenuId === item.id ? 'active' : '',
            ]"
            @click="changeMenu(item.id)"
            v-if="item.position == 'top'"
          ></div>
        </template>
      </div>

      <div class="menu-list menu-buttom">
        <template v-for="item in menus" :key="item.id">
          <div
            :class="[
              'menu-item no-drag iconfont',
              item.icon,
              activeMenuId === item.id ? 'active' : '',
            ]"
            @click="changeMenu(item.id)"
            v-if="item.position !== 'top'"
          ></div>
        </template>
      </div>
    </div>

    <div class="right">
      <router-view v-slot="{ Component }">
        <keep-alive include="chat">
          <component :is="Component" ref="componentRef" />
        </keep-alive>
      </router-view>
    </div>

    <WinOption :show-set-top="true"></WinOption>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import Avatar from "@/components/avatar/Avatar.vue";
import WinOption from "@/components/WinOption.vue";

const router = useRouter();
const route = useRoute();
const isExternalRoute = computed(() => route.meta.external === true);

const menus = ref([
  { id: 1, icon: "icon-duihua", name: "对话", path: "/chat", position: "top" },
  {
    id: 2,
    icon: "icon-lianxiren",
    name: "联系人",
    path: "/contact",
    position: "top",
  },
  {
    id: 3,
    icon: "icon-wodeshoucangquanbushoucang",
    name: "收藏",
    path: "/collection",
    position: "top",
  },
  { id: 4, icon: "icon-wenjian", name: "文件", path: "/file", position: "top" },
  {
    id: 5,
    icon: "icon-pengyouquan",
    name: "朋友圈",
    path: "/friendmoment",
    position: "top",
  },
  {
    id: 6,
    icon: "icon-xiaochengxu",
    name: "小程序",
    path: "/miniprogram",
    position: "bottom",
  },
  {
    id: 7,
    icon: "icon-shouji",
    name: "手机",
    path: "/phone",
    position: "bottom",
  },
  {
    id: 8,
    icon: "icon-shezhi",
    name: "设置",
    path: "/setting",
    position: "bottom",
  },
]);

const activeMenuId = ref(1);

const changeMenu = (id: any) => {
  activeMenuId.value = id;

  // router.push(menus.value.find((item: any) => item.id === id)?.path || "/");

  // 跳转页面
  if (id !== 5) {
    router.push(menus.value.find((item: any) => item.id === id)?.path || "/");
  } else {
    // 打开朋友圈

    if (window.hasOwnProperty("ipcRenderer")) {
      window.ipcRenderer.send("open-pengyouquan-window");
    } else {
      router.push(menus.value.find((item: any) => item.id === id)?.path || "/");
    }
  }
};

// 进入页面执行一次
changeMenu(1);

onMounted(() => {
  // 监听重新登录事件
  if (window.ipcRenderer) {
    window.ipcRenderer.on("redirectToLogin", () => {
      router.push({ path: "/login" });
    });
  }
});

onUnmounted(() => {
})
</script>

<style scoped lang="scss">
.layout {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
  flex-direction: columns; /* 左右排列 */
  color: #000;
  position: relative;

  .sidebar {
    background-color: #2e2e2e;
    color: white;
    width: 54px;
    height: 100vh;
    position: fixed; /* 让侧边栏固定在左侧 */
    height: 100vh;
    display: flex;
    flex-direction: column; /* 使侧边栏内容垂直排列 */
    align-items: center;
    text-align: center;
    padding-top: 35px;

    .menu-list {
      width: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: start;
      flex-direction: column;

      .menu-item {
        text-align: center;
        width: 36px;
        height: 36px;
        display: flex; /* 启用 Flex 布局 */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        color: #979797;
        font-size: 20px;

        &:first-child {
          margin-top: 25px;
        }

        &:hover {
          cursor: pointer;
          color: #c0c0c0; /* 鼠标悬停时的背景色 */
        }

        &.active {
          color: #07c160;
        }
      }
    }

    .menu-buttom {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      margin-bottom: 16px;
    }
  }

  .right {
    margin-left: 54px;
    flex: 1; /* 占据剩余空间 */
    height: 100vh; /* 高度填满屏幕 */
    // height: 100%;
    // overflow: hidden; /* 如果内容超出，允许滚动 */
    background-color: #f5f5f5; /* 可根据需要设置背景色 */
  }
}
</style>
